<template>
    <div class="log-list">
        <div class="list-header">
            <h3>日志列表</h3>
            <div class="header-actions">
                <div class="page-size-control">
                    <Field
                        v-model="pageSizeInput"
                        placeholder="输入每页显示数量"
                        type="number"
                        @blur="handlePageSizeInput"
                    />
                    <div class="quick-options">
                        <span 
                            v-for="size in [5, 10, 20, 50]" 
                            :key="size"
                            :class="{ active: pageSize === size }"
                            @click="setPageSize(size)"
                        >
                            {{ size }}条/页
                        </span>
                    </div>
                </div>
                <div class="action-buttons">
                    <van-button size="small" type="primary" plain @click="selectAll">全选</van-button>
                    <van-button size="small" type="primary" plain @click="unselectAll">取消全选</van-button>
                    <van-button size="small" type="primary" @click="fetchLogList">刷新</van-button>
                    <van-button size="small" type="danger" plain @click="deleteSelectedLogs">删除选中</van-button>
                    <van-button size="small" type="danger" @click="deleteAllLog">全部删除</van-button>
                </div>
            </div>
        </div>
        <div class="list-content">
            <div v-if="loading" class="loading-state">
                <van-loading type="spinner" size="24" />
                <span>加载中...</span>
            </div>
            <div v-else-if="error" class="error-state">
                <van-icon name="warning-o" size="24" />
                <span>{{ errorMessage }}</span>
                <van-button size="small" @click="fetchLogList">重试</van-button>
            </div>
            <div v-else-if="logList.length === 0" class="empty-state">
                <van-icon name="description" size="24" />
                <span>暂无日志</span>
            </div>
            <div v-else class="log-info">
                <div class="selection-summary">
                    <span>已选择 <strong>{{ selectedLogs.length }}</strong> 项，共 <strong>{{ totalItems }}</strong> 项</span>
                </div>
                <div class="log-table">
                    <table class="file-table">
                        <thead>
                            <tr>
                                <th class="th-checkbox">
                                    <van-checkbox 
                                        v-model="isAllSelected"
                                        @change="handleSelectAll"
                                    />
                                </th>
                                <th>序号</th>
                                <th>日志内容</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr v-for="(log, index) in logList" :key="log.id">
                                <td class="td-checkbox">
                                    <van-checkbox 
                                        v-model="selectedItems[index]"
                                        @change="updateSelection"
                                    />
                                </td>
                                <td class="td-serial">
                                    <span>{{ (currentPage - 1) * pageSize + index + 1 }}</span>
                                </td>
                                <td class="td-info">
                                    <div class="log-content">
                                        <div class="log-item">
                                            <span class="label">今日总结：</span>
                                            <span class="text-ellipsis">{{ log.todaySummary }}</span>
                                        </div>
                                        <div class="log-item">
                                            <span class="label">明日计划：</span>
                                            <span class="text-ellipsis">{{ log.nextSummary }}</span>
                                        </div>
                                        <div class="log-item">
                                            <span class="label">反馈意见：</span>
                                            <span class="text-ellipsis">{{ log.feedback }}</span>
                                        </div>
                                        <div class="log-item">
                                            <span class="label">自我评价：{{ log.selfEvaluate.text }}</span>
                                            <van-rate v-model="log.selfEvaluate.icon" :count="4" readonly />
                                        </div>
                                        <div class="time-info">
                                            <van-icon name="clock-o" class="time-icon" />
                                            {{ formatTime(log.updated_at) }}
                                        </div>
                                        <div class="action-bar">
                                            <van-button size="small" type="primary" plain @click="handleViewDetail(log)">
                                                <van-icon name="description" />
                                                <span>详情</span>
                                            </van-button>
                                            <van-button size="small" type="danger" plain @click="handleDeleteLog(log)">
                                                <van-icon name="delete" />
                                                <span>删除</span>
                                            </van-button>
                                            <lay-space size="md">
                                                <lay-tag type="primary">{{ getRecordTypeText(log.recordType) }}</lay-tag>
                                            </lay-space>
                                        </div>
                                    </div>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                    <div class="pagination-wrapper" v-if="logList.length > 0">
                        <Pagination
                            :current-page="currentPage"
                            :total-pages="totalPages"
                            :total="totalItems"
                            @page-change="handlePageChange"
                        />
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 添加日志详情弹窗 -->
    <van-popup 
        v-model:show="show" 
        position="center"
        round
        closeable
        teleport="body"
        :style="{ width: '90%', maxWidth: '650px' }"
        class="custom-popup"
    >
        <div class="log-detail-container">
            <div class="log-detail-header">
                <h3>日志详情</h3>
            </div>
            <div class="log-detail-content">
                <div class="log-detail-item">
                    <div class="detail-label">日志类型</div>
                    <div>
                        <lay-select v-model="editForm.recordType" placeholder="请选择">
                            <lay-select-option :value="1" label="日报"></lay-select-option>
                            <lay-select-option :value="2" label="周报"></lay-select-option>
                            <lay-select-option :value="3" label="月报"></lay-select-option>
                        </lay-select>
                    </div>
                </div>

                <div class="log-detail-item">
                    <div class="detail-label">今日总结：</div>
                    <div class="detail-content">
                        <textarea 
                            v-model="editForm.todaySummary" 
                            class="edit-textarea" 
                            placeholder="请输入今日总结"
                            rows="4"
                        ></textarea>
                    </div>
                </div>
                <div class="log-detail-item">
                    <div class="detail-label">明日计划：</div>
                    <div class="detail-content">
                        <textarea 
                            v-model="editForm.nextSummary" 
                            class="edit-textarea" 
                            placeholder="请输入明日计划"
                            rows="4"
                        ></textarea>
                    </div>
                </div>
                <div class="log-detail-item">
                    <div class="detail-label">反馈意见：</div>
                    <div class="detail-content">
                        <textarea 
                            v-model="editForm.feedback" 
                            class="edit-textarea" 
                            placeholder="请输入反馈意见"
                            rows="4"
                        ></textarea>
                    </div>
                </div>
                <div class="log-detail-item">
                    <div class="detail-label">自我评价：</div>
                    <div class="detail-content">
                        <div class="self-evaluate-wrapper">
                            <div class="rating-wrapper">
                                <van-rate 
                                    v-model="editForm.selfEvaluate.icon" 
                                    :count="4"
                                />
                                <span>{{ getRateText(editForm.selfEvaluate.icon) }}</span>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="log-detail-item">
                    <div class="detail-label">创建时间：</div>
                    <div class="detail-content">{{ currentLog?.updated_at ? formatTime(currentLog.updated_at) : '无' }}</div>
                </div>

                <div class="log-detail-item">
                    <div class="detail-label">图片附件：</div>
                    <div class="detail-content image-gallery">
                        <div class="image-list" v-if="displayImages.length > 0">
                            <div v-for="(image, index) in displayImages" :key="index" class="image-item">
                                <img :src="image.file_path" alt="附件图片" @click="previewImage(image.file_path)" />
                                <van-icon name="close" class="delete-icon" @click="deleteImage(index)" />
                            </div>
                        </div>
                        <div v-else class="no-images">暂无图片</div>
                        
                        <div class="upload-wrapper">
                            <ImageUploader 
                                v-model="uploadImages"
                                label="添加图片"
                                placeholder="点击上传图片"
                                :multiple="true"
                                :maxCount="5"
                                :maxSize="5 * 1024 * 1024"
                                @error="handleImageError"
                                class="image-uploader"
                            />
                        </div>
                    </div>
                </div>

                <div class="log-detail-item">
                    <div class="detail-label">文件附件：</div>
                    <div class="detail-content file-gallery">
                        <div class="file-list" v-if="displayFiles.length > 0">
                            <div v-for="(file, index) in displayFiles" :key="index" class="file-item">
                                <div class="file-info">
                                    <van-icon name="description" class="file-icon" />
                                    <div class="file-details">
                                        <div class="file-name">{{ file.file_name || '文件' }}</div>
                                        <div class="file-size">{{ formatFileSize(file.file_size) }}</div>
                                    </div>
                                </div>
                                <van-icon name="close" class="delete-icon" @click="deleteFile(index)" />
                            </div>
                        </div>
                        <div v-else class="no-files">暂无文件</div>
                        
                        <div class="upload-wrapper">
                            <UpLoadFile 
                                v-model="uploadFiles"
                                label="添加文件"
                                placeholder="点击上传文件"
                                :multiple="true"
                                :maxCount="3"
                                :maxSize="10 * 1024 * 1024"
                                :accept="'.pdf,.doc,.docx,.xls,.xlsx,.ppt,.pptx,.txt'"
                                @error="handleFileError"
                                class="file-uploader"
                            />
                        </div>
                    </div>
                </div>

                <div class="button-container">
                    <van-button 
                        type="default" 
                        size="small" 
                        @click="show = false"
                    >
                        关闭
                    </van-button>
                    <van-button 
                        type="primary" 
                        size="small" 
                        @click="handleSave"
                    >
                        保存
                    </van-button>
                </div>
            </div>
        </div>
    </van-popup>
</template>

<script setup>
import { ref, watch, computed, onMounted, nextTick } from 'vue';
import { 
    Icon as VanIcon, 
    Button as VanButton,
    Loading as VanLoading,
    Field,
    Checkbox as VanCheckbox,
    showToast,
    Rate as VanRate,
    Popup as VanPopup,
    showConfirmDialog,
    showImagePreview
} from 'vant';
import Pagination from '@/Pages/compontents/Pagination.vue';
import apiUrls from '@/config/apiUrls';
import request from '@/utils/request';
import UpLoadFile from '@/Pages/compontents/UpLoadFile.vue';
import ImageUploader from '@/Pages/compontents/ImageUpload.vue';

const props = defineProps({
    initialPageSize: {
        type: Number,
        default: 20
    }
});

const emits = defineEmits(['viewDetail']);

// 日志列表相关
const logList = ref([]);
const loading = ref(false);
const error = ref(false);
const errorMessage = ref('');
const pageSize = ref(props.initialPageSize);
const pageSizeInput = ref(props.initialPageSize.toString());

// 分页相关
const currentPage = ref(1);
const totalItems = ref(0);
const totalPages = ref(1);

// 选择相关
const selectedLogs = ref([]);
const selectedItems = ref({});
const isAllSelected = ref(false);

// 添加弹窗相关状态
const show = ref(false);
const currentLog = ref(null);
const editForm = ref({
    id: '',
    todaySummary: '',
    nextSummary: '',
    feedback: '',
    recordType: '',
    selfEvaluate: {},
    images: [],
    files: []
});

// 图片相关
const displayImages = ref([]);
const uploadImages = ref([]);

// 文件相关
const displayFiles = ref([]);
const uploadFiles = ref([]);

// 全选
const selectAll = () => {
    logList.value.forEach((_, index) => {
        selectedItems.value[index] = true;
    });
    isAllSelected.value = true;
    updateSelection();
};

// 取消全选
const unselectAll = () => {
    logList.value.forEach((_, index) => {
        selectedItems.value[index] = false;
    });
    isAllSelected.value = false;
    updateSelection();
};

// 更新选择状态
const updateSelection = () => {
    // 计算选中数量
    const selectedCount = Object.values(selectedItems.value).filter(Boolean).length;
    
    // 更新全选状态，但不触发全选操作
    if (selectedCount === logList.value.length) {
        isAllSelected.value = true;
    } else if (selectedCount === 0) {
        isAllSelected.value = false;
    }
    
    // 更新选中的日志ID列表
    selectedLogs.value = logList.value
        .filter((_, index) => selectedItems.value[index])
        .map(log => log.id);
};

// 处理全选框变化
const handleSelectAll = (checked) => {
    // 更新所有选择框的状态
    logList.value.forEach((_, index) => {
        selectedItems.value[index] = checked;
    });
    isAllSelected.value = checked;
    updateSelection();
};

// 监听列表变化，重置选择状态
watch(logList, () => {
    selectedItems.value = {};
    isAllSelected.value = false;
    selectedLogs.value = [];
}, { deep: true });

// 获取日志列表
const fetchLogList = async () => {
    loading.value = true;
    error.value = false;
    errorMessage.value = '';
    // 保存当前滚动位置
    const scrollPosition = document.documentElement.scrollTop || document.body.scrollTop;
    try {
        const response = await request.get(apiUrls.imageManger.getZhjyRepots, {
            params: {
                currentPage: currentPage.value,
                pageSize: pageSize.value
            }
        });

        if (response.code === 200) {
            logList.value = response.data.list || [];
            totalItems.value = response.data.total || 0;
            totalPages.value = Math.ceil(totalItems.value / pageSize.value);
        } else {
            error.value = true;
            errorMessage.value = response.message || '获取日志列表失败';
        }
    } catch (err) {
        error.value = true;
        errorMessage.value = '获取日志列表失败，请重试';
        console.error('获取日志列表失败:', err);
    } finally {
        loading.value = false;
        // 恢复滚动位置
        nextTick(() => {
            window.scrollTo(0, scrollPosition);
        });
    }
};

// 执行日志删除
const performDelete = async (ids) => {
    try {
        loading.value = true;
        const response = await request.delete(apiUrls.imageManger.getZhjyRepots, {
            data: { ids }
        });
        
        if (response.code === 200) {
            showToast({
                type: 'success',
                message: '删除成功'
            });
            // 删除成功后刷新列表
            await fetchLogList();
        } else {
            throw new Error(response.message || '删除失败');
        }
    } catch (error) {
        console.error('删除失败:', error);
        showToast({
            type: 'fail',
            message: error.message || '删除失败，请重试'
        });
    } finally {
        loading.value = false;
    }
};

// 删除选中的日志
const deleteSelectedLogs = async () => {
    if (selectedLogs.value.length === 0) {
        showToast('请先选择要删除的日志');
        return;
    }

    try {
        await showConfirmDialog({
            title: '确认删除',
            message: `确定要删除选中的 ${selectedLogs.value.length} 条日志吗？`,
        });

        const response = await request.delete(apiUrls.imageManger.getZhjyRepots, {
            data: { ids: selectedLogs.value }
        });

        if (response.code === 200) {
            showToast('删除成功');
            fetchLogList();
            selectedLogs.value = [];
            isAllSelected.value = false;
        } else {
            showToast(response.message || '删除失败');
        }
    } catch (error) {
        if (error !== 'cancel') {
            console.log(error);
            showToast('删除失败，请重试');
        }
    }
};

// 删除所有日志
const deleteAllLog = async () => {
    try {
        await showConfirmDialog({
            title: '确认删除',
            message: '确定要删除所有日志吗？此操作不可恢复！',
        });

        const response = await request.delete(apiUrls.imageManger.getZhjyRepots, 
            {
                data: { ids: 'all' }
            }
        );

        if (response.code === 200) {
            showToast('删除成功');
            fetchLogList();
            selectedLogs.value = [];
            isAllSelected.value = false;
        } else {
            showToast(response.message || '删除失败');
        }
    } catch (error) {
        if (error !== 'cancel') {
            console.log(error);
            showToast('删除失败，请重试');
        }
    }
};

// 处理删除单个日志
const handleDeleteLog = async (log) => {
        await showConfirmDialog({
            title: '确认删除',
            message: '确定要删除这条日志吗？',
        })
        .then(async () => {
            await performDelete([log.id]);
        })
        .catch(() => {
            // 用户取消操作
        });
};

// 获取评分文本
const getRateText = (value) => {
    switch(value) {
        case 1: return '尚需努力';
        case 2: return '一般';
        case 3: return '良好';
        case 4: return '优秀';
        default: return '';
    }
};

// 处理图片预览
const previewImage = (url) => {
    
    showImagePreview({
        images: [url],
        startPosition: 0,
        closeable: true,
        closeIconPosition: 'top-right',
    });
};

// 删除图片
const deleteImage = (index) => {
    displayImages.value.splice(index, 1);
};

// 处理图片上传错误
const handleImageError = (error) => {
    console.error('图片上传错误:', error);
    showToast(error.message || '图片上传失败，请重试');
};

// 删除文件
const deleteFile = (index) => {
    displayFiles.value.splice(index, 1);
};

// 处理文件上传错误
const handleFileError = (error) => {
    console.error('文件上传错误:', error);
    showToast(error.message || '文件上传失败，请重试');
};

// 修改handleViewDetail方法
const handleViewDetail = (log) => {
    console.log('显示日志详情：', log);
    currentLog.value = log;
    
    // 确保selfEvaluate对象存在
    if (!currentLog.value.selfEvaluate) {
        currentLog.value.selfEvaluate = {
            text: '优秀',
            icon: 3
        };
    }
    
    // 初始化图片和文件数组
    if (!currentLog.value.images) {
        currentLog.value.images = [];
    }
    
    if (!currentLog.value.files) {
        currentLog.value.files = [];
    }
    
    // 初始化编辑表单数据
    editForm.value = {
        id: currentLog.value?.id || '',
        todaySummary: currentLog.value?.todaySummary || '',
        nextSummary: currentLog.value?.nextSummary || '',
        feedback: currentLog.value?.feedback || '',
        recordType: currentLog.value?.recordType || '',
        selfEvaluate: {
            text: currentLog.value?.selfEvaluate?.text || '优秀',
            icon: currentLog.value?.selfEvaluate?.icon || 3
        },
        images: [],
        files: []
    };
    
    show.value = true;
};

// 监听currentLog变化
watch(currentLog, (newLog) => {
    if (newLog) {
        // 如果日志中已有图片，初始化显示图片数组
        if (newLog.images && newLog.images.length > 0) {
            displayImages.value = [...newLog.images];
        } else {
            displayImages.value = [];
        }
        // 重置上传图片数组
        uploadImages.value = [];

        // 如果日志中已有文件，初始化显示文件数组
        if (newLog.files && newLog.files.length > 0) {
            displayFiles.value = [...newLog.files];
        } else {
            displayFiles.value = [];
        }
        // 重置上传文件数组
        uploadFiles.value = [];
    }
}, { immediate: true });

// 修改handleSave方法
const handleSave = async () => {
    const requestData = {
        id: editForm.value.id,
        todaySummary: editForm.value.todaySummary,
        nextSummary: editForm.value.nextSummary,
        feedback: editForm.value.feedback,
        recordType: editForm.value.recordType,
        selfEvaluate: editForm.value.selfEvaluate.icon,
        oldFiles: displayFiles.value,
        newFiles: uploadFiles.value,
        oldImages: displayImages.value,
        newImages: uploadImages.value
    }
    
    // 显示加载状态
    const loading = showToast({
        type: 'loading',
        message: '保存中...',
        duration: 0
    });
    
    try {
        // 发送请求保存日志和上传文件
        const response = await request.put(apiUrls.imageManger.getZhjyRepots, requestData);
        
        if (response.code === 200) {
            // 保存成功后更新原始数据
            showToast({
                type: 'success',
                message: '保存成功'
            });
            
            // 刷新日志列表
            fetchLogList();
            
            // 关闭弹窗
            show.value = false;
        } else {
            throw new Error(response.message || '保存失败');
        }
    } catch (error) {
        console.error('保存失败:', error);
        showToast({
            type: 'fail',
            message: error.message || '保存失败，请重试'
        });
    } finally {
        loading.close();
    }
};

// 通用方法
const formatTime = (time) => {
    if (!time) return '';
    const date = new Date(time);
    return date.toLocaleString();
};

// 处理页码变化
const handlePageChange = (page) => {
    currentPage.value = page;
    fetchLogList();
};

// 修改页面大小处理方法
const handlePageSizeInput = () => {
    const value = parseInt(pageSizeInput.value);
    if (value && value > 0) {
        pageSize.value = value;
        currentPage.value = 1; // 重置到第一页
        fetchLogList();
    } else {
        pageSizeInput.value = pageSize.value.toString();
        showToast('请输入有效的数字');
    }
};

const setPageSize = (size) => {
    // 保存当前滚动位置
    const scrollPosition = document.documentElement.scrollTop || document.body.scrollTop;
    
    pageSize.value = size;
    pageSizeInput.value = size.toString();
    currentPage.value = 1; // 重置到第一页
    
    // 获取新数据
    fetchLogList().then(() => {
        // 恢复滚动位置
        nextTick(() => {
            window.scrollTo(0, scrollPosition);
        });
    });
};

const getRecordTypeText = (value) => {
    switch(value) {
        case 1: return '日报';
        case 2: return '周报';
        case 3: return '月报';
        default: return '未知';
    }
};

// 通用方法
const formatFileSize = (size) => {
    if (!size) return '0 B';
    const units = ['B', 'KB', 'MB', 'GB'];
    let index = 0;
    while (size >= 1024 && index < units.length - 1) {
        size /= 1024;
        index++;
    }
    return `${size.toFixed(2)} ${units[index]}`;
};

onMounted(() => {
    fetchLogList();
});

// 暴露方法给父组件
defineExpose({
    fetchLogList,
    selectAll,
    unselectAll,
    getSelectedLogs: () => selectedLogs.value
});
</script>

<style scoped>
.log-list {
    margin-top: 20px;
    background: #fff;
    border-radius: 8px;
    padding: 16px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}

.list-header {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-bottom: 16px;
}

.list-header h3 {
    margin: 0;
    font-size: 16px;
    color: #333;
    text-align: center;
}

.header-actions {
    display: flex;
    gap: 8px;
    align-items: center;
    justify-content: flex-end;
}

.page-size-control {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 120px;
}

.quick-options {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.quick-options span {
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 12px;
    color: #666;
    cursor: pointer;
    background: #f7f8fa;
    border: 1px solid #ebedf0;
}

.quick-options span:hover {
    color: #1989fa;
    border-color: #1989fa;
}

.quick-options span.active {
    color: #fff;
    background: #1989fa;
    border-color: #1989fa;
}

:deep(.van-field) {
    background-color: #f5f7fa;
}

:deep(.van-field__control) {
    background-color: #f5f7fa;
}

.action-buttons {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
}

.action-buttons .van-button {
    min-width: 76px;
}

.loading-state,
.error-state,
.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px;
    color: #666;
    gap: 8px;
}

.selection-summary {
    margin-bottom: 12px;
    padding: 8px 12px;
    background: #f5f7fa;
    border-radius: 4px;
    font-size: 14px;
    color: #606266;
}

.selection-summary strong {
    color: #1989fa;
    font-weight: 600;
}

.log-table {
    width: 100%;
    overflow-x: auto;
}

.file-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 20px;
}

.file-table th {
    background-color: #f5f7fa;
    padding: 12px;
    text-align: left;
    font-weight: 500;
    color: #606266;
}

.file-table td {
    padding: 12px;
    border-bottom: 1px solid #ebeef5;
}

.td-serial {
    width: 80px;
    text-align: center;
    padding: 12px 16px;
}

.td-serial span {
    display: inline-block;
    min-width: 28px;
    padding: 6px 10px;
    background-color: #f5f7fa;
    color: #606266;
    font-weight: 500;
    border-radius: 6px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    font-size: 13px;
    transition: all 0.3s ease;
}

.td-serial span:hover {
    background-color: #ffffff;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    transform: translateY(-1px);
}

.th-checkbox,
.td-checkbox {
    width: 40px;
    text-align: center;
    padding: 12px 8px;
}

.td-checkbox :deep(.van-checkbox) {
    display: flex;
    justify-content: center;
}

.td-checkbox :deep(.van-checkbox__icon) {
    border-radius: 4px;
    width: 18px;
    height: 18px;
    border: 1px solid #ccc;
    background-color: #fff;
    transition: all 0.2s ease;
}

.td-checkbox :deep(.van-checkbox__icon--checked) {
    background-color: #1989fa;
    border-color: #1989fa;
}

.td-checkbox :deep(.van-checkbox__icon i) {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.8);
    color: white;
}

.td-info {
    min-width: 300px;
}

.log-content {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.log-item {
    display: flex;
    align-items: center;
    gap: 8px;
}

.label {
    color: #606266;
    font-weight: 500;
    white-space: nowrap;
}

.text-ellipsis {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 300px;
}

.time-info {
    display: flex;
    align-items: center;
    gap: 4px;
    color: #909399;
    font-size: 12px;
    margin-top: 4px;
}

.time-icon {
    font-size: 14px;
}

.action-bar {
    display: flex;
    gap: 12px;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px dashed #ebeef5;
}

.action-bar .van-button {
    display: flex;
    align-items: center;
    gap: 4px;
}

.pagination-wrapper {
    margin-top: 20px;
    display: flex;
    justify-content: center;
    padding: 16px 0;
}

/* 移动端适配 */
@media screen and (max-width: 768px) {
    .log-list {
        padding: 12px;
        margin-top: 16px;
    }

    .list-header {
        flex-direction: column;
        gap: 12px;
    }

    .list-header h3 {
        width: auto;
        text-align: left;
    }

    .header-actions {
        width: 100%;
        flex-wrap: wrap;
        justify-content: space-between;
    }

    .page-size-control {
        width: 100%;
    }

    .quick-options {
        width: 100%;
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 8px;
    }

    .quick-options span {
        text-align: center;
        padding: 6px 0;
    }

    .text-ellipsis {
        max-width: 200px;
    }

    .td-serial {
        padding: 10px 12px;
    }

    .td-serial span {
        min-width: 24px;
        padding: 4px 8px;
        font-size: 12px;
    }

    .th-checkbox,
    .td-checkbox {
        width: 32px;
        padding: 10px 6px;
    }

    .file-table {
        display: block;
    }

    .file-table thead {
        display: none;
    }

    .file-table tbody {
        display: block;
    }

    .file-table tr {
        display: block;
        padding: 12px;
        border: 1px solid #eee;
        margin-bottom: 8px;
        border-radius: 8px;
        position: relative;
    }

    .file-table td {
        border: none;
    }

    .td-checkbox,
    .td-serial {
        display: inline-block;
        vertical-align: middle;
        padding: 0 0 10px 0;
    }

    .td-checkbox {
        width: 32px;
        padding-right: 4px;
    }

    .td-serial {
        width: auto;
        padding-right: 10px;
    }

    .td-info {
        display: block;
        width: 100%;
        padding: 0;
        clear: both;
    }

    .log-item {
        margin-top: 8px;
    }

    /* 日志列表表格的移动端样式 */
    .log-list .file-table tr {
        display: block;
        padding: 12px;
        border: 1px solid #eee;
        margin-bottom: 12px;
        border-radius: 8px;
        position: relative; 
        padding-top: 40px; /* 为复选框和序号添加上部填充 */
    }
    
    .log-list .file-table td {
        display: block; 
        padding: 0; 
        border: none;
        width: auto; 
    }
    
    .log-list .td-checkbox {
        position: absolute; 
        top: 12px;
        left: 12px;
        width: auto; 
        padding: 0; 
    }
    
    .log-list .td-serial {
        position: absolute; 
        top: 12px;
        left: 40px; /* 位于复选框旁边 */
        width: auto; 
        padding: 0; 
    }
    
    .log-list .td-serial span {
        display: inline-block;
        min-width: 24px;
        padding: 4px 8px;
        background-color: #f5f7fa;
        color: #606266;
        font-weight: 500;
        border-radius: 6px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
        font-size: 12px;
        transition: all 0.3s ease;
    }
    
    .log-list .td-info {
        width: 100%; 
        padding: 0; 
    }
    
    .selection-summary {
        text-align: center;
        padding: 10px;
    }
}

/* 添加弹窗相关样式 */
.log-detail-container {
    padding: 20px;
    max-height: 70vh;
    overflow-y: auto;
}

.log-detail-header {
    text-align: center;
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 1px solid #ebedf0;
}

.log-detail-header h3 {
    margin: 0;
    font-size: 18px;
    color: #323233;
    font-weight: 600;
}

.log-detail-item {
    margin-bottom: 20px;
}

.detail-label {
    font-size: 15px;
    color: #646566;
    margin-bottom: 8px;
    font-weight: 500;
}

.detail-content {
    font-size: 14px;
    color: #323233;
    line-height: 1.6;
    word-break: break-all;
    white-space: pre-wrap;
    background-color: #f7f8fa;
    padding: 10px;
    border-radius: 4px;
}

.self-evaluate-wrapper {
    width: 100%;
    background-color: #fff;
    padding: 10px;
    border-radius: 4px;
}

.rating-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 6px 0;
}

:deep(.van-rate__icon) {
    font-size: 24px;
}

.van-popup--center {
    position: fixed;
}

.log-detail-content {
    overflow-y: auto;
    max-height: 60vh;
}

/* 添加按钮容器样式 */
.button-container {
    display: flex;
    justify-content: center;
    gap: 16px;
    margin-top: 24px;
}

.button-container .van-button {
    min-width: 80px;
}

.image-gallery {
    display: flex;
    flex-direction: column;
    background-color: #f7f8fa;
    padding: 0 !important;
    border-radius: 4px;
    width: 100%;
}

.image-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 10px;
    width: 100%;
}

.image-item {
    position: relative;
    width: 80px;
    height: 80px;
    border-radius: 4px;
    overflow: hidden;
    border: 1px solid #ebedf0;
}

.image-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    cursor: pointer;
}

.delete-icon {
    position: absolute;
    top: 4px;
    right: 4px;
    background-color: rgba(0, 0, 0, 0.5);
    color: #fff;
    border-radius: 50%;
    padding: 4px;
    font-size: 12px;
    cursor: pointer;
    z-index: 1;
}

.upload-wrapper {
    width: 100%;
    padding: 10px;
    box-sizing: border-box;
}

.image-uploader {
    width: 100%;
}

.file-gallery {
    display: flex;
    flex-direction: column;
    background-color: #f7f8fa;
    padding: 0 !important;
    border-radius: 4px;
    width: 100%;
}

.file-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 10px;
    width: 100%;
}

.file-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #fff;
    padding: 10px;
    border-radius: 4px;
    border: 1px solid #ebedf0;
    position: relative;
}

.file-info {
    display: flex;
    align-items: center;
    gap: 10px;
    width: calc(100% - 30px);
}

.file-icon {
    font-size: 24px;
    color: #1989fa;
    flex-shrink: 0;
}

.file-details {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.file-name {
    font-size: 14px;
    font-weight: 500;
    color: #323233;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.file-size {
    font-size: 12px;
    color: #969799;
}

.file-item .delete-icon {
    position: static;
    background-color: rgba(0, 0, 0, 0.5);
    color: #fff;
    border-radius: 50%;
    padding: 4px;
    font-size: 12px;
    cursor: pointer;
    z-index: 1;
    margin-left: 8px;
    flex-shrink: 0;
}

.image-item .delete-icon {
    position: absolute;
    top: 4px;
    right: 4px;
}

.no-files {
    padding: 15px;
    text-align: center;
    color: #969799;
}

.edit-textarea {
    width: 100%;
    padding: 8px;
    border: 1px solid #ebedf0;
    border-radius: 4px;
    resize: vertical;
    min-height: 80px;
    font-size: 14px;
    color: #323233;
    line-height: 1.5;
    background-color: #fff;
    outline: none;
    transition: border-color 0.2s;
}

.edit-textarea:focus {
    border-color: #1989fa;
}

.edit-textarea::placeholder {
    color: #c8c9cc;
}

.detail-content:has(.edit-textarea) {
    background-color: transparent;
    padding: 0;
}

:deep(.custom-popup) {
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    position: fixed !important;
    margin: 0 !important;
}

:deep(.van-popup--center) {
    position: fixed;
}

@media screen and (min-width: 992px) {
    :deep(.custom-popup) {
        width: 650px !important;
    }
}

@media screen and (max-width: 768px) {
    :deep(.custom-popup) {
        width: 95% !important;
        max-width: 500px !important;
    }
}

:deep(.van-popup__close) {
    z-index: 100 !important;
    color: #646566 !important;
    font-size: 18px !important;
    opacity: 0.8 !important;
}

:deep(.van-popup__close:hover) {
    opacity: 1 !important;
}
</style> 